<template>
<div class="header-box container">
    <!-- 全部商品分类 -->
    <div class="all-show">
        <div class="shop fl">
            <!-- 侧边栏 -->
            <div class="l-shop ">
                <p>全部商品分类</p>
                <div class="bot_list">
                    <ul class="first">
                        <li class="first-item"><a href="#">耗材</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">1
                                <li class="item"></li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">器材</a>/ <a href="#">配件</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">2
                                <li class="item"></li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">计量检测器具</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">3
                                <li class="item"></li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">印前设备</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">4
                                <li class="item"></li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">印刷设备</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">5
                                <li class="item"></li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">印后设备</a>/<a href="#">成型加工设备</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">6
                                <li class="item"></li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">软件</a>/ <a href="#">服务</a>/<a href="#">活动</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">
                                <li class="item">7</li>
                            </ul>
                        </li>
                        <li class="first-item"><a href="">图书</a>/ <a href="#">期刊</a> /<a href="#">文化用品</a><span><img src="../../../assets/enter.png" alt=""></span>
                            <ul class="second">8
                                <li class="item"></li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- 分类导航 -->
        <div class="nav-shop fl">
            <ul>
                <li><a href="#">新华社物流</a></li>
                <li><a href="#">新华云印务</a></li>
                <li><a href="#">商品分类一</a></li>
                <li><a href="#">商品分类二</a></li>
                <li><a href="#">商品分类三</a></li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'HeadClassification',
    data() {
        return {

        }
    },
}
</script>

<style lang="less" scoped>
.header-box {

    // 全部商品分类
    .all-show {
        height: 44px;

        .shop {
            width: 220px;
            height: 44px;

            .l-shop {
                width: 220px;
                height: 44px;
                background-color: #D92410;
                line-height: 44px;
                color: #fff;
                position: relative;
                z-index: 100;

                p {
                    text-align: center;
                    position: relative;
                }

                p::before {
                    content: '';
                    display: block;
                    width: 17px;
                    height: 14px;
                    background: url(../../../assets/classification.png) no-repeat;
                    position: absolute;
                    left: 20px;
                    top: 14px;
                }

                .bot_list {
                    width: 220px;
                    height: 455px;
                    background: rgba(0, 0, 0, .5);
                    box-sizing: border-box;
                    position: relative;
                    // display: none;
                    .first {

                        .first-item {
                            cursor: pointer;
                            padding: 0 10px 0 20px;

                            a {
                                color: #fff;

                            }

                            span {
                                float: right;
                            }

                            .second {
                                width: 807px;
                                height: 455px;
                                background-color: #fff;
                                position: absolute;
                                top: 0;
                                left: 220px;
                                display: none;
                                color:#000;
                            }
                        }

                        .first-item:hover .second {
                            display: block;
                        }
                    }

                }
            }
        }

        // 分类导航
        .nav-shop {
            height: 100%;
            line-height: 44px;

            li {
                float: left;
                margin-left: 40px;
                cursor: pointer;

                a {
                    color: #333;
                }
            }
        }
    }
}
</style>
